<template>
  <div class="home">
    <b>{{ food }}</b><br/>
    <button @click="handleClick('back')">返回上一页</button>
    <button @click="handleClick('push')">跳转到argu</button>
    <button @click="handleClick('replace')">替换到parent</button>
    <button @click="handleUserInfo" :style="{ background: `${ bgColor }`}">获取用户数据</button>
    <button @click="handleToCount" :style="{ background: `${ bgColor }`}">跳转数字动画页面</button>
    <button @click="handleLogout">退出登陆</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld'
import { getUserInfo } from '@/api/user/user'
import { mapActions} from 'vuex'

export default {
  name: 'home',
  components: { HelloWorld },
  data () {
    return {
      bgColor: ''
    }
  },
  props: {
    food: {
      type: String,
      default: 'defHome'
    }
  },
  // 组件内路由守卫 路由跳转前  页面渲染前
  //  beforeRouteEnter (to, from, next) {
  //    next( vm => {
  // vm 为页面的this
  //    })
  //  },
  // 页面路由即将离开的时候 调用此方法
  //  beforeRouteLeave (to, from, next) {
  // 提示用户信息没有保存 是否进行保存后离开
  //    let leave = confirm("您确定要离开么")
  //    if (leave) next()
  //    else next(false)
  //  },
  methods: {
    ...mapActions([
      'logout'
    ]),
    handleClick (type) {
      if (type === 'back') this.$router.back()
      else if (type === 'push') {
        let name = 'wfx'
        this.$router.push({
          path: `/argu/${name}`
          //          name: 'argu',
          //          params: {
          //            name: 'wangfengxi'
          //          }
        })
      } else if (type === 'replace') {
        this.$router.replace({
          name: 'parent'
        })
      }
    },
    handleUserInfo () {
      getUserInfo({ userId: '1111' }).then(res => {
        console.log('userInfo', res.data)
        this.bgColor = res.data.color
      })
    },
    handleToCount () {
      this.$router.push('/count')
    },
    handleLogout () {
      this.logout()
      this.$router.push('/login')
    }
  }
}
</script>
